<template>
	<div class="buju-box">
		<div class="data-box">
			<div class="number-box border chuxian-left">
				<slot name="top"></slot>
			</div>
			<div class="table-box border chuxian-center">
				<slot name="body"></slot>
			</div>
		</div>
		<div class="echarts-box">
			<div class="ech-1-box border chuxian-top">
				<slot name="ech1"></slot>
			</div>
			<div class="ech-2-box border chuxian-right">
				<slot name="ech2"></slot>
			</div>
			<div class="ech-3-box border chuxian-bottom">
				<slot name="ech3"></slot>
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style scoped>
	.buju-box {
		height: 82vh;
		width: 100%;
		display: flex;
		overflow: hidden;
	}

	.data-box {
		width: 70%;
		margin-right: 10px;
		display: flex;
		flex-direction: column;
	}
	

	.echarts-box {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.number-box {
		height: 15%;
		margin-bottom: 10px;
	}

	.table-box {
		overflow: hidden;
		flex: 1;
		z-index: 1;
	}

	.ech-1-box,
	.ech-2-box {
		flex: 1;
		margin-bottom: 10px;
	}

	.ech-3-box {
		flex: 1;
	}

	.border {
		border: 2px solid rgba(255, 255, 255, 0.2);
		border-radius: 5px;
		background-color: #000928;
	}
	
</style>
